Cataloged AutobiographyBERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini


MEMBINA 3-COLUMN MINIMA TEMPLATE
April 14, 2008
Posted by: Fauzie


Blogger Minima template mempunyai satu sidebar sahaja. Kita boleh menambah satu lagi column di bahagian kiri blog bagi menjadikan template kita mempunyai 3 column. Mempunyai 3 column dapat memaksimakan penggunaan ruang atau space terutama membolehkan penambahan "page element".

Blog ini hanya untuk tujuan menukar Blogger Minima Template sahaja. Bagi tujuan mempelajarinya, saya syorkan anda create blog baru khas untuk mengikuti tutorial ini dan download blogger Minima template.

Jika anda telah bersedia, sila ke Dashboard klik-> Layout kemudian klik-> Edit HTML dan skrol ke bawah dan cari kod HTML seperti di bawah ini:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width=410px;
float: $startSide;
word-wrap:break-word;/*fix for long text breakingsidebar float in IE*/
overflow:hidden;/* fix for long non-text contentbreaking IE sidebar float*/
}

#sidebar-wrapper {
width:220px;
float: $endSide;
word-wrap: break-word;/* fix for long text breakingsidebar float in IE*/
overflow: hidden;/*fix for long non-text
content breaking IE sidebar float*/
}


Kebanyakan template mempunyai 3 wrapper seperti di atas:-

#outer-wrapper - menunjukkan ruang blog sepenuhnya
#main-wrapper - ruang utama pos blog anda
#sidebar-wrapper - ruang utama untuk sidebar

Untuk membina sidebar atau column tambahan, sila copy/paste "#sidebar-wrapper" berwarna maroon di atas dan letakkan atau "paste" di bahagian bawah sidebar wrapper ini seperti berikut:-


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:startSide;
font: $bodyfont;
}

#main-wrapper {
width=410px;
float: $startSide;
word-wrap:break-word;/*fix for long text breakingsidebar float in IE*/
overflow:hidden;/* fix for long non-text contentbreaking IE sidebar float*/
}

#sidebar-wrapper {
width:220px;
float:$endSide;
word-wrap: break-word;/* fix for long text breakingsidebar float in IE*/
overflow: hidden;/*fix for long non-text
content breaking IE sidebar float*/
}

#sidebar-wrapper {
width:220px;
float: $endSide;
word-wrap: break-word;/* fix for long text breakingsidebar float in IE*/
overflow: hidden;/*fix for long non-text
content breaking IE sidebar float*/
}


Kemudian tukarkan angka dan perkataan berwarna hijau kepada angka dan perkataan seperti yang tertera di bawah ini:-

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width="400";
margin-left: 25px;
float: left;
word-wrap:break-word;/*fix for long text breakingsidebar float in IE*/
overflow:hidden;/* fix for long non-text contentbreaking IE sidebar float*/
}

#sidebar-wrapper {
width:150px;
float: right;
word-wrap: break-word;/* fix for long text breakingsidebar float in IE*/
overflow: hidden;/*fix for long non-text
content breaking IE sidebar float*/
}

#newsidebar-wrapper {
width:150px;
float: left;
word-wrap: break-word;/* fix for long text breakingsidebar float in IE*/
overflow: hidden;/*fix for long non-text
content breaking IE sidebar float*/
}


Sekarang kita perlu menukar "layout editor" pula. Sila skrol ke bawah dan cari kod seperti di bawah ini. Jika ianya tiada dalam template anda, sila taip kod tersebut di bahagian bawah kod di atas (di bawah content breaking IE sidebar float*/ }):-

/** Page structure tweaks for layout editor wireframe*/
body#layout#header {
margin-left: 0px;
margin-right: 0px;


Di bahagian bawah kod di atas, sila taipkan kod-kod berwarna maroon seperti berikut:-


/** Page structure tweaks for layout editor wireframe*/
body#layout#header {
margin-left: 0px;
margin-right: 0px;}

body#layout#outer-wrapper,
body#layout#header-wrapper,
body#layout#footer {
width: 750px;
padding: 0px;
}

body#layout#main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout#side-wrapper,
body#layout#newsidebar-wrapper{
width: 150px;
}


Menempatkan Blog Posts Di Ruang Tengah

Kita telah membina sidebar ke dua iaitu di bahagian kiri template. In bermakna bahagian "Blog Posts" akan berada di ruang tengah template. Untuk memastikan Blog Posts berada di tempatnya, kita hendaklah membuat sedikit perubahan ke atas kod yang telah sedia ada.

Skrol ke bawah ruang 'Edit HTML" sehingga kita bertemu script-script seperti berikut:-

<div id='main-wrapper'>
<b:section class='main' id='main'
showaddelement='no'>
<b:widget id='Blog1' locked='true'
title='Blog Posts' type='Blog'/>
</b:section>

</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
preferred='yes'/>
</div>


Kemudian taipkan kod-kod berwarna maroon di bawah ini di bahagian atas kod div id='main-wrapper'.

<div id='newsidebar-wrapper'>
<b:section
class='sidebar' id=newsidebar'
preferred='yes'
</b:section>
</div
<div id='main-wrapper'>
<b:section class='main'id='main'
showaddelement='no'>
<b:widget id='Blog!' locked='true'
title="Blog Posts' type='Blog'/>
</b:section>
</div>
<div id=sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
preferred='yes'/>
</div>


Tukar Saiz Header dan Footer

Untuk menukar saiz header dan footer, skrol ke bawah ruang Edit Html dan cari kod-kod ini:-

#header-wrapper {
width:660px;


#footer {
width:660px;


Tukarkan angka-angka berwarna maroon dari 660 kepada 750. Kelebaran Header dan Footer akan bertambah. Dalam kes ini, Header dan Footer mempunyai lebar yang sama iaitu 750 pixel.

Klik "Preview" untuk lihat layout baru anda dan jika anda berpuas hati klik "Save template".


Kembali ke Arkib
Box 1
Klik Icon